/**
 * 我的钱包
 */
<template>
  <div>
    <!-- 钱包 -->
    <el-row :gutter="20"   v-if="info">
      <el-col :span="24">
        <el-col :span="5">
          <el-card class="card_wallet">
            <el-col :span="16">
              <div>
                <span class="font12">会员钱包余额</span>
                <div class="font18 text-black font-w6 margin-t10">
                  <span>$</span>
                  {{ b(info.userBalances) }}
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <img src="~@/assets/img/icon_card1.png" />
            </el-col>
          </el-card>
        </el-col>
       
        <el-col :span="5">
          <el-card class="card_wallet">
            <el-col :span="16">
              <div>
                <span class="font12">共享卡钱包总额</span>
                <div class="font18 text-black font-w6 margin-t10">
                  {{ info.userMatrixBalances }}
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <img src="~@/assets/img/icon_card2.png" />
            </el-col>
          </el-card>
        </el-col> 
        <el-col :span="5">
          <el-card class="card_wallet">
            <el-col :span="16">
              <div>
                <span class="font12">会员NK卡余额 </span>
                <div class="font18 text-black font-w6 margin-t10">
                  <span>$</span>
                  {{ b(info.cardBalance) }}
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <img src="~@/assets/img/icon_card3.png" />
            </el-col>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card class="card_wallet">
            <el-col :span="16">
              <div>
                <span class="font12">会员卡Bin</span>
                <div class="font18 text-black font-w6 margin-t10">
                  {{ info.count }}
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <img src="~@/assets/img/icon_card4.png" />
            </el-col>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="card_wallet">
            <el-col :span="16">
              <div>
                <span class="font12">有效会员</span>
                <div class="font18 text-black font-w6 margin-t10">
                  {{ info.userCount }}
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <img src="~@/assets/img/icon_card2.png" />
            </el-col>
          </el-card>
        </el-col>
      </el-col> 
    </el-row>


    <el-row :gutter="20"   v-if="info" style="margin-top: 20px"> 
      <el-col :span="24"> 
          <el-row
            type="flex"
            justify="space-between"
            align="middle"
            class="pro_box"
            v-if="info"
          > 
            <el-col :span="8">
              <div class="card_wallet2" style="width: 100%;">
                <el-progress
                  type="circle"
                  :percentage="
                    info.transactionCount == 0
                      ? 0
                      : Math.round(
                          (info.refuseCount / (info.transactionAmount - info.voidCount)) * 100
                        )
                  "
                  color="#439A86"
                  define-back-color="#CFCACA"
                  :width="60"
                ></el-progress>
                <div class="aline-c margin-l20" style="width: 200px;">
                  <div class="font15 font-w6 text-black">拒付率</div>
                  <div class="pro_t margin-t5">
                    <span class="text-gree">{{ info.refuseCount }}</span>
                    /
                    {{ info.transactionCount - info.voidCount }}
                  </div>
                </div>
               </div> 
            </el-col>  
            <el-col :span="8">
              <div class="card_wallet2"  style="width: 100%;  margin: 0 20px;" > 
                <el-progress
                  type="circle"
                  :percentage="
                    info.transactionCount == 0
                      ? 0
                      : Math.round(
                          (info.refundCount / (info.transactionAmount - info.voidCount)) * 100
                        )
                  "
                  color="#439A86"
                  define-back-color="#CFCACA"
                  :width="60"
                ></el-progress>
                <div class="aline-c margin-l20">
                  <div class="font15 font-w6 text-black">退款率</div>
                  <div class="pro_t margin-t5">
                    <span class="text-gree">{{ info.refundCount }}</span>
                    /
                    {{ info.transactionCount - info.voidCount }}
                  </div>
                </div>
              </div> 
            </el-col> 
          
            <el-col :span="8">
              <div class="card_wallet2" style="width: 100%; "> 
                <el-progress
                  type="circle"
                  :percentage="
                    info.transactionAmount == 0
                      ? 0
                      : Math.round(
                          (info.refundAmount / (info.transactionAmount - info.voidAmount)) * 100
                        )
                  "
                  color="#439A86"
                  define-back-color="#CFCACA"
                  :width="60"
                ></el-progress>
                <div class="aline-c margin-l20">
                  <div class="font15 font-w6 text-black">退款金额率</div>
                  <div class="pro_t margin-t5">
                    <span class="text-gree">{{ info.refundAmount }}</span>
                    /
                    {{ info.transactionAmount - info.voidAmount }}
                  </div>
                </div>
              </div>
            </el-col> 
          </el-row> 
        </el-col>  
    </el-row>

    <!-- htp_prod/api/admin/getSysWarningList -->
    <!--  --> 
   
 
    <div class="boxBlock"> 
      <div  class="tabBox">
        <span  v-for="(item,index) in tabList" :key="index" :class="activeName==index?'cur':''" @click="changeTab(index)">{{ item }}</span>  
      </div> 
      <div class="serachTop"> 
          <!-- 搜索筛选 -->
          <el-form :inline="true" v-if="info&&activeName==0" :model="formInline" class="user-search">
            <el-form-item >
              <el-input
                size="small"
                v-model="formInline.userId"
                placeholder="输入账号ID"
                type="number"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                size="small"
                v-model="formInline.loginName"
                placeholder="输入账号名称"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-select
                size="small"
                v-model="formInline.authType"
                placeholder="请选择认证状态"
                clearable
              >
                <!-- <el-option label="请选择认证状态" value=""></el-option> -->
                <el-option
                  v-for="type in statusData"
                  :label="type.key"
                  :value="type.value"
                  :key="type.value"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-select
                size="small"
                v-model="formInline.compute"
                placeholder="请选择开启关闭" 
              > 
                <el-option 
                  label="不统计"
                  :value="0" 
                ></el-option>
                <el-option 
                  label="统计"
                  :value="1" 
                ></el-option>
              </el-select>
            </el-form-item> 

            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="search"
              >
                搜索
              </el-button>
            </el-form-item>
          </el-form>

          <el-form :inline="true" v-if="info&&activeName==1" :model="formInline" class="user-search">
            <el-form-item >
              <el-input
                size="small"
                v-model="formInline.userId"
                placeholder="输入账号ID"
                type="number"
                clearable
              ></el-input>
            </el-form-item> 
            <el-form-item >  
                <el-date-picker
                    v-model="formInline.time"
                    size="small"
                    type="date" 
                    :value-format="'yyyy-MM-dd'"
                    :format="'yyyy-MM-dd'" 
                    :clearable="false" 
                  >
                </el-date-picker> 
            </el-form-item>

            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="search"
              >
                搜索
              </el-button>
            </el-form-item>
          </el-form>

      </div>

      <div class="wallet_box margin-t30"> 
      <!--列表-->
      <el-table
        size="small"
        :data="listData"
        highlight-current-row
        style="width: 100%"
        v-if="info&&activeName==0"
      >
        <el-table-column prop="userId" label="ID" width="80"> </el-table-column>
        <el-table-column prop="params.iamCount" label="IAM" width="120"> </el-table-column> 
        <el-table-column
          prop="loginName"
          label="账户名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="userName" label="昵称" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="balance" label="中心钱包余额" show-overflow-tooltip>
          <template slot-scope="scope">
            <div @click="showBalance(scope.row)" style="color: #e3b85a;">{{ b(scope.row.balance) }}</div>
          </template>
        </el-table-column>
       
        <el-table-column prop="balance" label="共享卡钱包余额" show-overflow-tooltip min-width="160">
          <template slot-scope="scope">
            <div>{{ b(scope.row.matrixBalance) }}</div>
          </template>
        </el-table-column>

        <el-table-column prop="balance" label="Martix余额" show-overflow-tooltip min-width="160">
          <template slot-scope="scope">
            <div>{{ b(scope.row.realTimeBalance) }}</div>
          </template>
        </el-table-column> 
        
        <el-table-column
          prop="cardBalance"
          label="常规卡余额"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div v-if="scope.row.params">
              {{
                b(
                  scope.row.params.cardBalance
                    ? scope.row.params.cardBalance
                    : 0
                )
              }}
            </div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="count"
          label="卡Bin"
          show-overflow-tooltip
          width="80"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.params.count }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="refuseCount"
          label="拒付率"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div v-if="scope.row.params.refuseCount>=0">
              {{
                scope.row.params.transactionCount == 0
                  ? "0%"
                  : (
                      (scope.row.params.refuseCount /
                      (scope.row.params.transactionCount-scope.row.params.voidCount)) *
                      100
                    ).toFixed(0) + "%"
              }}
            </div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="refundCount"
          label="退款率"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div v-if="scope.row.params.refundCount>=0">
              {{
                scope.row.params.transactionCount == 0
                  ? "0%"
                  : (
                      (scope.row.params.refundCount /
                      (scope.row.params.transactionCount-scope.row.params.voidCount)) *
                      100
                    ).toFixed(0) + "%"
              }}
            </div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="refundAmount"
          label="退款金额率"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div v-if="scope.row.params.refundAmount>=0">
              {{
                scope.row.params.transactionAmount == 0
                  ? "0%"
                  : (
                      (scope.row.params.refundAmount /
                        (scope.row.params.transactionAmount-scope.row.params.voidAmount)) *
                      100
                    ).toFixed(0) + "%"
              }}
            </div>
            <div v-else>-</div>
          </template>
        </el-table-column>

        <el-table-column prop="authType" label="企业认证" show-overflow-tooltip>
          <template slot-scope="scope">
            <div>{{ statusJson[scope.row.authType].key }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- <el-table-column prop="remark" label="备注" show-overflow-tooltip>
        </el-table-column> -->
        <!-- <el-table-column align="center" label="操作" width="80">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="changUser(false, scope.row)">
              查看
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>

      <el-table
        size="small"
        :data="listData"
        highlight-current-row
        style="width: 100%"
        v-if="info&&activeName==1"
      >
        <el-table-column prop="userId" label="用户ID" fixed="left" > </el-table-column> 
        <el-table-column
          prop="voidRate"
          label="拒付率"
          show-overflow-tooltip
        >
          <template slot-scope="scope">  
            <div v-if="Number(scope.row.voidRate)>=0">
              {{
                Number(scope.row.voidRate) == 0
                  ? "0%"
                  : Number(scope.row.voidRate*100).toFixed(0) + "%"
              }}
            </div>
            <div v-else>-</div>

          </template>
        </el-table-column> 
        <el-table-column
          prop="time"
          label="时间"
          show-overflow-tooltip
        >
        </el-table-column>
 
      </el-table>


    </div>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>


    <ChangeDetails
      ref="changeDetails"
       :visble="changeDetailsVisible"
       v-if="changeDetailsVisible"
       :curItem="curItem"
       @close="changeDetailsVisible=false"
    ></ChangeDetails>


    </div>

  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
  numberNo,
  spStr,
  timestampSubTime
} from "../../utils/util";
import {
  req,
  service,
  encrypt,
  decrypt,
  reqtoken,
  format,
  getUrl,
} from "../../api/axiosFun";
import Pagination from "../../components/Pagination";
import ChangeDetails from "../user/ChangeDetails.vue";
export default {
  data() {
    return {
      info: null,
      b: format,
      numberNo: numberNo,
      listData: "",
      statusData: [
        { key: "未认证", value: 0 },
        // { key: "未认证", value: 1 },
        { key: "认证成功", value: 2 },
      ],
      statusJson: [
        { key: "未认证", value: 0 },
        { key: "未认证", value: 1 },
        { key: "认证成功", value: 2 },
      ],
      formInline: {
        pageNum: 1,
        pageSize: 10,
        authType: "",
        loginName: "",
        userId: "",
        compute:0,
        time: new Date() // 初始化为 Date 对象
      },
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      }, 
      tabList:['会员列表','预警信息'],
      activeName:'0',
      changeDetailsVisible:false,
      curItem:{}
    };
  },
  // 注册组件
  components: {
    Pagination,
    ChangeDetails
  },
  created() {
    this.getInfo();
    this.getdata(this.formInline);
  },
  methods: {
    showBalance(item) {
      this.curItem = item
      this.changeDetailsVisible = true
    },
    getInfo() {
      service
        .get("/api/admin/getData", {})
        .then((res) => {
          if (res.code == 0) {
            this.info = res.data;
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
 
 
    changeTab(index) {
      this.pageparm.currentPage = 1;
      this.pageparm.pageSize = 10;
      this.activeName = index;
      if (index == 1) {
        const today = new Date();
        const year = today.getFullYear();
        const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
        const day = String(today.getDate()).padStart(2, '0');
        this.formInline.time = `${year}-${month}-${day}`;
      } else {
        this.formInline.time = "";
      }

      this.getdata();
    },
 
    getdata(parameter) {
      let url = getUrl(parameter);
      service
        .get(this.activeName==0?"/api/admin/getUserList" + url:"/api/admin/getSysWarningList" + url, {})
        .then((res) => {
          if (res.code == 0) {
            this.listData = res.rows;
            this.pageparm.currentPage = this.formInline.pageNum;
            this.pageparm.pageSize = this.formInline.pageSize;
            this.pageparm.total = res.total;
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline);
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.pageNum = parm.currentPage;
      this.formInline.pageSize = parm.pageSize;
      this.getdata(this.formInline);
    },
  },
};
</script>

<style scoped>
.wallet_box {
  margin-top: 30px;
  border-radius: 20px;
}
.card_wallet {
  padding: 10px 0 20px;
  height: 80px;
  background-size: 100% 100%;
  border-radius: 20px;
  color: #a0aec0;
}

.pro_box .el-col {
  display: flex;
  justify-content: center;
  align-items: center;
}
/deep/ .el-progress .el-progress-circle {
  width: 50px !important;
  height: 50px !important;
}
/deep/ .el-progress--circle .el-progress__text {
  font-size: 14px !important;
  font-weight: 600;
}
.tabBox{
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
}
.tabBox span{
  padding: 10px 20px;
  display: inline-block;
  cursor: pointer;
}
.tabBox span.cur{ 
  background: #e3b85a;
  color: #ffff;
  border-bottom: 2px solid #e3b85a;

}
.card_wallet2{
  display: flex;
  box-shadow: 0 2px 0.0625rem 0 rgba(0,0,0,.1);
  border-radius: 10px;
  background: #fff;
  padding: 30px;
 
  
}
</style>
 
 